<template>
  <div
    class="menu-content-attribute-relation-edge-context-menu-delete"
    @click.stop="open = true"
  >
    取消关系
  </div>
  <a-modal v-model:open="open">
    <template #title> 取消关系 </template>
    <div class="modal-box before-border after-border">
      <p>
        <info-circle-filled
          style="color: #faad14; margin-right: 9px"
        />确认取消关系吗 ?
      </p>
    </div>
    <template #footer>
      <a-button @click="open = false">取消</a-button>
      <a-button
        type="primary"
        :loading="loading"
        :disabled="loading"
        @click="onOk"
      >
        确定
      </a-button>
    </template>
  </a-modal>
</template>
<script setup>
import { ref } from 'vue'
import { InfoCircleFilled } from '@ant-design/icons-vue'
import mockAPI from '@/api/simple-mock.js'
import { cancelRelation } from '@/api/db.js'
import { useDbType } from '@/views/db-management/provide-context.js'
/**
 * 外部参数
 */
let props = defineProps({
  id: { type: [String, Number] },
  graph: { required: true },
})
/**
 * 事件
 */
let open = ref(false)
let loading = ref(false)
let dbType = useDbType()
async function onOk() {
  loading.value = true
  try {
    await cancelRelation(
      {
        id: props.id,
      },
      dbType,
    )
    props.graph.removeEdgeData([props.id])
    props.graph.draw()
    open.value = false
  } catch (e) {
    console.log(e)
  }
  loading.value = false
}
</script>
<style lang="less" scoped>
.menu-content-attribute-relation-edge-context-menu-delete {
  padding: 0 8px;
}
</style>
